<template>
  <div class="play">
    <van-nav-bar
      :title="allShow.name"
      left-text="返回"
      left-arrow
      @click-left="fhHandel"
      @click-right="geciHandel"
    >
      <template #right>
        <van-icon name="orders-o" size="18" />
      </template>
    </van-nav-bar>
    <div class="cd" v-show="!isShow">
      <div class="yin">
        <!-- <audio controls :src="src" /> -->
        <!--  属性
          @timeupdate="getCurr"-->
        <audio
          :src="src"
          @pause="is_stop = true"
          @play="is_stop = false"
          autoplay="autoplay"
          ref="audio"
        ></audio>
      </div>
      <!-- { an: isPlaying, pause: isPaused } -->
      <img
        :src="allShow.al.picUrl"
        alt=""
        @click="geciHandel"
        :class="isPlaying ? 'an' : 'pause'"
      />
    </div>
    <ul v-show="isShow">
      <li v-for="(item, index) in gecis" :key="index">{{ item }}</li>
    </ul>
    <div class="footer">
      <div class="footer-top">
        <!--  -->
        <van-icon name="like" @click="MyHandel()" :color="color ? 'red' : ''" />
        <van-icon name="arrow-left" />
        <van-icon v-show="checkOne" name="pause-circle" @click="playOne" />
        <van-icon v-show="checkTwo" name="play-circle" @click="playTwo" />
        <van-icon name="arrow" />
        <van-icon name="bars" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import { myLikeAPI } from "../services/Play";
import { geciAPI } from "../services/Play";
export default {
  data() {
    return {
      //播放暂停图标控制
      checkOne: true,
      checkTwo: false,
      //歌曲播放暂停控制
      is_stop: false,
      //我喜欢添加控制
      color: false,
      geci: "",
      gecis: [],
      //图片路径
      src: "",
      allShow: { al: {} },
      //歌词显示隐藏
      isShow: false,
      //播放状态
      isPlaying: true,
    };
  },
  async created() {
    if (this.$route.query.id == undefined) {
      this.$route.query.id = 1496776216;
    }
    // console.log(this.$route.query.id);
    this.src = `https://music.163.com/song/media/outer/url?id=${this.$route.query.id}.mp3`;
    // console.log(this.src);
    axios
      .get("http://localhost:3000/song/detail?ids=" + this.$route.query.id)
      .then((res) => {
        // this.src = res.data;
        this.allShow = res.data.songs[0];
        // console.log(res.data.songs[0].al.picUrl);
      });
    const lrc = await geciAPI(this.$route.query.id);
    this.geci = lrc.lrc.lyric;
    this.gecis = this.formatLyr(this.geci);
  },
  methods: {
    //点击暂停
    playOne() {
      this.checkOne = !this.checkOne;
      this.checkTwo = !this.checkTwo;
      this.$refs.audio.pause();
      this.isPlaying = false;
    },
    //点击播放
    playTwo() {
      this.checkOne = !this.checkOne;
      this.checkTwo = !this.checkTwo;
      this.$refs.audio.play();
      this.isPlaying = true;
    },
    /* getCurr() {
      //音频进度改变时触发
      this.curr = parseInt(this.$refs.audio.currentTime);
      this.progress = (this.curr / this.duration) * 100;
    }, */
    fhHandel() {
      this.$router.go(-1);
    },
    async MyHandel() {
      this.color = !this.color;
      if (this.color) {
        const res = await myLikeAPI(this.$route.query.id, true);
        // console.log(res.code);
        if (res.code == 200) {
          Toast("添加歌曲到我喜欢成功");
        }
      }
      if (this.color == false) {
        const res = await myLikeAPI(this.$route.query.id, false);
        // console.log(res.code);
        if (res.code == 200) {
          Toast("取消歌曲到我喜欢成功");
        }
      }
    },
    geciHandel() {
      this.isShow = !this.isShow;
    },
    formatLyr(lyricStr) {
      // 可以看network观察歌词数据是一个大字符串, 进行拆分.
      let reg = /\[.+?\]/g; //
      let timeArr = lyricStr.match(reg); // 匹配所有[]字符串以及里面的一切内容, 返回数组
      // console.log(timeArr); // ["[00:00.000]", "[00:01.000]", ......]
      let contentArr = lyricStr.split(/\[.+?\]/).slice(1); // 按照[]拆分歌词字符串, 返回一个数组(下标为0位置元素不要,后面的留下所以截取)
      // console.log(contentArr);
      let lyricObj = {}; // 保存歌词的对象, key是秒, value是显示的歌词
      timeArr.forEach((item, index) => {
        // 拆分[00:00.000]这个格式字符串, 把分钟数字取出, 转换成秒
        let ms = item.split(":")[0].split("")[2] * 60;
        // 拆分[00:00.000]这个格式字符串, 把十位的秒拿出来, 如果是0, 去拿下一位数字, 否则直接用2位的值
        let ss =
          item.split(":")[1].split(".")[0].split("")[0] === "0"
            ? item.split(":")[1].split(".")[0].split("")[1]
            : item.split(":")[1].split(".")[0];
        // 秒数作为key, 对应歌词作为value
        lyricObj[ms + Number(ss)] = contentArr[index];
      });
      // 返回得到的歌词对象(可以打印看看)
      // console.log(lyricObj);
      return lyricObj;
    },
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  .play {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(#cfebff, #73c6f0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    //-webkit-
    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .an {
      animation: rotation 8s infinite linear;
    }
    .pause {
      animation: rotation 8s infinite linear;
      animation-play-state: paused;
    }
    .van-nav-bar {
      width: 100vw;
      height: 7vh;
      background-color: rgba(255, 255, 255, 0);
      .van-nav-bar__text {
        color: #fff;
      }
      .van-nav-bar__title {
        color: #fff;
      }
      .van-nav-bar__right {
        color: #fff;
      }
      .van-icon {
        color: #fff;
      }
    }
    .cd {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 26% auto;
      position: relative;
      img {
        width: 41vw;
        height: 41vw;
        border-radius: 50%;
        border: 10vw solid #000000;
      }
    }
    ul {
      height: 55vh;
      padding-top: 10vh;
      display: block;
      text-align: center;
      color: #00378bbd;
      overflow-x: auto;
      li {
        width: 75%;
        display: block;
        margin: 0 auto;
      }
    }
    .footer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 10vw;
      bottom: 15vh;
      .footer-top {
        width: 80vw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .van-icon {
          font-size: 8vw;
          color: #fff;
        }
      }
    }
  }
}
</style>
